<template>
  <div class="details-container">
    <div class="details-headContent">
      <el-page-header content="详情页面" @back="goBack" />
    </div>
    <div class="details-content">
      <el-timeline :reverse="true">
        <el-timeline-item
          v-for="item in detail"
          :key="item.gmt_modified"
          :timestamp="item.gmt_modified"
          color="#0bbd87"
          placement="top"
        >
          <el-card>
            <h4>{{ item.commit_remark }}</h4>
            <p>{{ item.commit_name }} 提交于 {{ item.gmt_modified }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <el-button type="success" icon="el-icon-check" plain round style="float: right" @click="dialogVisible = true">更新进度
      </el-button>
    </div>

    <el-dialog
      title="添加项目"
      :visible.sync="dialogVisible"
      width="400px"
    >
      <el-form ref="form" :model="form" label-width="80px" label-position="right">
        <el-row>
          <el-col>
            <el-form-item prop="commit_name" label="姓名">
              <el-input v-model="form.commit_name" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item prop="commit_remark" label="更新内容">
              <el-input v-model="form.commit_remark" placeholder="请输入更新内容" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addProgress, getDetail } from '@/api/progress'
import { Message } from 'element-ui'

export default {
  name: 'Details',
  data() {
    return {
      detail: [],
      dialogVisible: false,
      form: {
        commit_name: '',
        commit_remark: ''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    goBack() {
      this.$router.push('/system/progress')
    },

    handleClick() {
      addProgress(this.$route.params.project_id, this.form.commit_name, this.form.commit_remark).then(response => {
        Message({
          message: '更新成功',
          type: 'success',
          duration: 5 * 1000
        })
        this.$router.go(0)
      })
    },

    dataFormat(time) {
      var date = new Date(time)
      var year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      // 拼接
      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
    },

    fetchData() {
      getDetail(this.$route.params.project_id).then(response => {
        this.detail = response.data
        this.detail.forEach(item => {
          item.gmt_modified = this.dataFormat(item.gmt_modified)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.details-container {
  width: 100%;
  min-height: calc(100vh);
  background-color: #f0f2f5;
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: hidden;

  .details-headContent {
    background-color: #ffffff;
    min-height: 72px;
    padding: 24px;
  }

  .details-content {
    margin-top: 50px;
    padding: 0 500px;
    background-color: #f0f2f5;
  }
}
</style>
